
<template>
    <view :class="$style.page">
        <PageHeader>
            <view class="PAGE_TITLE">待办</view>
        </PageHeader>
        <nut-grid v-if="dataRows.length > 0" :column-num="3" square>
            <nut-grid-item v-for="(item, index) in dataRows" :key="index">
                <view style="min-width: 0;width: 100%;" @click="goNav(item)">
                    <view :class="$style.icon">
                        <view :class="$style.bage"><uni-badge size="small" :max-num="99" :text="item.tasks.length"></uni-badge></view>
                        <AppIcon :class="$style.icon" :type="item.coverType" :icon="item.cover" :color="item.bccolor" />
                    </view>
                    <view :class="$style.name">{{ item.name }}</view>
                </view>
                <!-- <view style="min-width: 0;width: 100%;" :url="'/pages/work/detail?ids=' + item.ids">
                    <view :class="$style.icon">
                        <view :class="$style.bage"><uni-badge size="small" :max-num="99" :text="item.taskIds.length"></uni-badge></view>
                        <image src="@/pics/2.png" mode="widthFix" :class="$style.img" />
                    </view>
                    <div :class="$style.name">{{ item.name }}</div>
                </navigator> -->
            </nut-grid-item>
        </nut-grid>
        <template v-else>
            <template v-if="!loading">
                <nut-empty description="暂无待办"></nut-empty>
            </template>
        </template>
        <TabBar />
    </view>
</template>
<script lang="ts" setup>
import PageHeader from '@/components/PageHeader.vue'
    import TabBar from '@/TabBar/index.vue'
    import { taskListApi } from '@/api/Work';
import { ref } from 'vue';
import AppIcon from '@/components/AppIcon.vue'

    const loading = ref(true)
    const dataRows = ref<any[]>([])

    uni.showLoading()
    taskListApi().then(r => {
        
        if(r.data) {
            // r.data.forEach(row => {
            //     row.ids = row.taskIds.join(",")
            // })

            dataRows.value = r.data
        }
        uni.hideLoading()
        loading.value = false
    })

    function goNav(item) {
        item.tasks.sort(function(a, b) {
            return (new Date(b.createTime)) - (new Date(a.createTime))
        })

        location.href = item.tasks[0].h5ViewUrl
    }
</script>


<style lang="scss" module>

    .page{
        height: 100vh;
        position: relative;
        padding-bottom: $tab-bar-height;
    }

    .icon{
        height: 84rpx;
        width: 84rpx;
        margin: auto;

        position: relative;
        .bage{
            position: absolute;
            right: 0;
            top: 0;
            transform: translate(20rpx, -10rpx);
            z-index: 2;
        }

        .img{
            // width: 100%;
            // height: 100%;
            // display: block;
        }
    }

    .name {
        min-width: 0;
        font-size: 28rpx;
        text-align: center;
        margin-top: 10rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>